 <template>
  <d2-container>
    <el-dialog
      title="保单数据"
      :visible.sync="dialog4PolicyVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="110px" size="mini">
        <el-row style="width:100%">
          <el-form-item label="商业险保单号" placeholder="" prop="carNo">
            <el-input v-model="form.policyNo"></el-input>
          </el-form-item>
          <el-form-item label="交强险保单号" placeholder="" prop="carNo">
            <el-input v-model="form.saliPolicyNo"></el-input>
          </el-form-item>
          <el-form-item label="险种" placeholder="" prop="carNo">
            <el-input type="textarea" :rows="5" v-model="form.insuranceType"></el-input>
          </el-form-item>
          <el-form-item label="商业险" placeholder="" prop="carNo">
            <el-input v-model="form.commerceinsuranceFee" type="number"></el-input>
          </el-form-item>
          <el-form-item label="交强险" placeholder="" prop="carNo">
            <el-input v-model="form.saliFee" type="number"></el-input>
          </el-form-item>
          <el-form-item label="车船税" placeholder="" prop="carNo">
            <el-input v-model="form.vehicleVesselTaxFee" type="number"></el-input>
          </el-form-item>
          <el-form-item label="优惠金额" placeholder="" prop="carNo">
            <el-input v-model="form.discountAmount" type="number"></el-input>
          </el-form-item>
          <el-form-item label="车主" placeholder="" prop="carNo">
            <el-input v-model="form.carOwner"></el-input>
          </el-form-item>
          <el-form-item label="车主身份证" placeholder="" prop="carNo">
            <el-input v-model="form.carOwnerIdCard"></el-input>
          </el-form-item>
          <el-form-item label="被保险人" placeholder="" prop="carNo">
            <el-input v-model="form.recognizee"></el-input>
          </el-form-item>
          <el-form-item label="被保险人身份证" placeholder="" prop="carNo">
            <el-input v-model="form.recognizeeIdCard"></el-input>
          </el-form-item>
          <el-form-item label="邮寄地址" placeholder="" prop="carNo">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="支付方式" placeholder="" prop="carNo">
            <el-select v-model="form.payment" placeholder="请选择" size="small">
              <el-option
                v-for="item in paywayList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="保单类型" placeholder="" prop="carNo">
            <el-select v-model="form.newRenewalStatus" placeholder="请选择" size="small">
              <el-option
                v-for="item in policyTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="赠送礼品" placeholder="" prop="carNo">
            <el-select v-model="form.gift" placeholder="请选择" size="small">
              <el-option
                v-for="item in giftList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开票信息" placeholder="" prop="carNo">
            <el-input type="textarea" :rows="5" v-model="form.billingInformation"></el-input>
          </el-form-item>
          <el-form-item label="备注" placeholder="" prop="carNo">
            <el-input type="textarea" :rows="5" v-model="form.remark"></el-input>
          </el-form-item>
          <el-form-item label="起保日期" placeholder="" prop="carNo">
            <el-date-picker v-model="form.commencemenDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="出单日期" placeholder="" prop="carNo">
            <el-date-picker v-model="form.billDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="状态" placeholder="" prop="carNo">
            <el-select v-model="form.policyStatus" placeholder="请选择" size="small">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog4PolicyVisible = false" icon="el-icon-close" size="mini">取 消</el-button>
        <el-button type="primary" @click="updatePolicy()" icon="el-icon-check" size="mini">编 辑</el-button>
      </div>
    </el-dialog>
    <template slot="header">
      <el-form
        :inline="true"
        :model="searchForm"
        ref="searchForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item label="车牌号" prop="carNo">
          <el-input v-model="searchForm.carNo" placeholder="车牌号" style="width: 100px;"/>
        </el-form-item>
        <el-form-item label="状态" prop="carNo">
          <el-select v-model="searchForm.policyStatus" placeholder="请选择" size="small">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearchFormSubmit">
            <d2-icon name="search"/>&nbsp;查询
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <!-- table表格 -->
    <el-table
      ref="multipleTable"
      :key="tableKey"
      :data="list"
      @selection-change="handleSelectionChange"
      highlight-current-row
      stripe
      style="width: 100%;"
      sortable="true"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" label="保单号" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.policyNo}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车牌号" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.carNo}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车型" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.vehicleType}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车主" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.carOwner}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.policyStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" show-overflow-tooltip width="200">
        <template slot-scope="scope">
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" show-overflow-tooltip width="200">
        <template slot-scope="scope">
          <span>{{scope.row.createDate | parseTime('{y}-{m}-{d} {h}:{m}:{s}')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleDetial(scope.row)"
          >车辆信息</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handleUpdate(scope.row)"
            icon="el-icon-edit"
          >保单详情</el-button>
          <el-button size="mini" type="danger" @click="deletes(scope.row)" icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- footer 分页条 -->
    <template slot="footer">
      <el-pagination
        background=""
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-sizes="[50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin: -10px;"
      ></el-pagination>
    </template>
  </d2-container>
</template>

<script>
import * as policy from "@/api/policy";
import * as newcomer from "@/api/newcomer";

import { mapGetters, mapState } from "vuex";
import ElRadioGroup from "element-ui/packages/radio/src/radio-group";
import ElOption from "element-ui/packages/select/src/option";
// Import component
import Loading from "vue-loading-overlay";
// Import stylesheet
import "vue-loading-overlay/dist/vue-loading.css";

import * as customer from "@/api/customer";

export default {
  components: {
    ElOption,
    ElRadioGroup,
    Loading
  },
  name: "customer_list",
  data() {
    return {
      statusList: [],
      paywayList: [],
      policyTypeList: [],
      giftList: [],
      dialog4PolicyVisible: false,
      table: {
        columns: [],
        data: [],
        size: "mini",
        stripe: true,
        border: true
      },
      list: null,
      total: null,
      listQuery: {
        page: 1,
        limit: 50,
        car_owner: null,
        car_no: null,
        client_type: null,
        insEndDate: null
      },
      form: {
        carNo: undefined,
        vehicleNo: undefined,
        engineNumber: undefined,
        carOwner: undefined,
        mobilePhone: undefined,
        vehicleType: undefined,
        firstRegistrationDate: undefined
      },
      rules: {},
      statusOptions: ["0", "1"],
      rolesOptions: [],
      dialogFormVisible: false,
      dialogDetailVisible: false,
      dialogDeptVisible: false,
      dialogImportExcelVisible: false,
      dialogAssignVisible: false,
      userAdd: false,
      userUpd: false,
      userDel: false,
      dialogStatus: "",
      textMap: {
        update: "编辑客户信息",
        create: "新增客户信息",
        import: "导入业务数据",
        assign: "分配业务数据"
      },
      isDisabled: {
        0: false,
        1: true
      },
      tableKey: 0,
      multipleSelection: [],
      searchForm: {}
    };
  },
  computed: {
    ...mapState("d2admin/user", ["info"])
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "有效",
        1: "无效",
        9: "锁定"
      };
      return statusMap[status];
    }
  },
  created() {
    this.getList();

    newcomer.queryDictListByType("gift").then(resp => {
      console.log(resp);
      this.giftList = resp.records;
    });

    newcomer.queryDictListByType("payWay").then(resp => {
      console.log(resp);
      this.paywayList = resp.records;
    });

    newcomer.queryDictListByType("policyType").then(resp => {
      console.log(resp);
      this.policyTypeList = resp.records;
    });

    newcomer.queryDictListByType("policyStatus").then(resp => {
      console.log(resp);
      this.statusList = resp.records;
    });
  },
  methods: {
    updatePolicy() {
      // this.form.clientId = this.sellDataId;
      debugger
      policy.update(this.form).then(resp => {
        console.log(resp);
        if (resp.status == "SUCCEED") {
          this.$notify({
            title: "提示",
            message: "操做成功",
            type: "success"
          });

          this.dialog4PolicyVisible = false;
        } else {
          this.$notify({
            title: "提示",
            message: resp.errorMessage,
            type: "error"
          });
        }
      });
    },

    handleSearchFormSubmit() {
      this.listQuery.carNo = this.searchForm.carNo;
      this.listQuery.policy_status = this.searchForm.policyStatus;
      
      this.getList();
    },

    handleMove() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: "error",
          message: "请选择要操作的数据"
        });
        return;
      }

      let ids = [];
      this.multipleSelection.forEach(element => {
        ids.push(element.id);
      });

      // clientGrouping1
      // {ids: [], status: 'clientGrouping1'}
      batchMoveSellData({ ids: ids, status: this.value2 }).then(resp => {
        console.log(resp);
        if (resp.status == "SUCCEED") {
          this.$message({
            type: "success",
            message: "操作成功"
          });

          this.getList();
        } else {
          this.$message({
            type: "error",
            message: "操作失败"
          });
        }
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleBatchDelete() {
      this.$confirm("确认删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let ids = [];
        this.multipleSelection.forEach(element => {
          ids.push(element.id);
        });

        batchDelObj(ids).then(resp => {
          console.log(resp);
          this.$message({
            type: "success",
            message: "删除成功"
          });

          this.getList();
        });
      });
    },

    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: "region1" }, { name: "region2" }]);
      }
      if (node.level > 3) return resolve([]);

      var hasChild;
      if (node.data.name === "region1") {
        hasChild = true;
      } else if (node.data.name === "region2") {
        hasChild = false;
      } else {
        hasChild = Math.random() > 0.5;
      }

      setTimeout(() => {
        var data;
        if (hasChild) {
          data = [
            {
              name: "zone" + this.count++
            },
            {
              name: "zone" + this.count++
            }
          ];
        } else {
          data = [];
        }

        resolve(data);
      }, 500);
    },

    getList() {
      policy.fetchList(this.listQuery).then(response => {
        this.list = response.records;
        this.total = response.total;
        this.isLoading = false;
      });
    },
    getNodeData(data) {
      this.dialogDeptVisible = false;
      this.form.deptId = data.id;
      this.form.deptName = data.name;
      deptRoleList(data.id).then(response => {
        this.rolesOptions = response;
      });
    },
    handleDept() {
      fetchDeptTree().then(response => {
        this.treeDeptData = response;
        this.dialogDeptVisible = true;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      // deptRoleList(this.info.deptId).then(response => {
      //   this.rolesOptions = response.data
      // })
    },
    handleAssign() {
      if (this.value == "") {
        this.$message({
          type: "error",
          message: "请选择分配对象"
        });
        return;
      }

      this.$confirm("确认分配么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let clientIds = [];
        this.multipleSelection.forEach(element => {
          clientIds.push(element.id);
        });

        let input = {
          userId: this.value,
          clientIds: clientIds
        };
        assignData(input).then(resp => {
          console.log(resp);
          this.getList();
        });
      });
    },
    handleUpdate(row) {
      this.form = row;
      this.dialog4PolicyVisible = true;
    },
    create(formName) {
      const set = this.$refs;
      this.form.role = this.role;
      set[formName].validate(valid => {
        if (valid) {
          this.form.carOwner = this.form.clientName;
          this.form.userId = this.info.id;
          addObj(this.form).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.dialogAssignVisible = false;
      this.$refs[formName].resetFields();
    },

    update(formName) {
      debugger
      const set = this.$refs;
      // this.form.role = this.role
      console.log(this.form);
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          this.form.password = undefined;

          this.form.clientType = this.value3;
          this.form.mobilePhone = null;
          this.form.standbyMobile = null;

          putObj(this.form).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },

    deletes(row) {
      this.$confirm("确认删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        policy
          .del(row.id)
          .then(() => {
            this.getList();
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000
            });

            customer.batchMoveSellData({
              ids: [row.clientId],
              status: "-1"
            }).then(resp => {
              console.log(resp);
            });
          })
      });
    },

    handleDetial(row) {
      this.$router.push({
        path: "/customer/detail",
        query: { id: row.clientId, clientName: row.carOwner, obj: row }
      });
    },

    resetTemp() {
      this.form = {
        id: undefined,
        username: "",
        password: "",
        roleList: [],
        delFlag: "",
        deptId: "",
        phone: ""
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.d2-mb {
  float: left;
  margin-right: 20px;
}
.d2-mb .el-button i {
  margin-right: 4px;
}

.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
